
/* 普通注释 */
//  静默注释    只保留在SASS源文件中，编译后被省略。


//  $blue:#007bff;
// $indigo: #6610f2;
// $purple: #6f42c1;
// $pink: #e83e8c;
// $red: #dc3545;
// $orange: #fd7e14;
// $yellow: #ffc107;
// $green: #28a745;
// $teal: #20c997;
// $cyan: #17a2b8;
// $white: #fff;
// $gray: #6c757d;
// $gray-dark: #343a40;
// $primary: #007bff;
// $secondary: #6c757d;
// $success: #28a745;
// $info: #17a2b8;
// $warning: #ffc107;
// $danger: #dc3545;
// $light: #f8f9fa;
// $dark: #343a40;

// $centerWidth:1140px;

// $font: 14px/20px "微软雅黑";

// $side:left;

// @function pxToRem($val){
//     @return #{$val/100px}rem;
// }

// @mixin compa($key,$val){
//     // -ms-transition: all 0.5s 0s linear;
//     // -moz-transition: all 0.5s 0s linear;
//     // -webkit-transition: all 0.5s 0s linear;
//     // transition: all 0.5s 0s linear;

//     -ms-#{$key}:$val;
//     -moz-#{$key}:$val;
//     -webkit-#{$key}:$val;
//     #{$key}:$val;
// }

// sass引入    在一个sass文件中引入另一个sass文件
// 如果sass只做引入 不想让改文件编译  可以在文件名前 加一个前缀"_"

@import "_common.scss";
@import "_reset.scss";


body{
    font:$font;
}

.w{
    width: $centerWidth;
    margin: 0 auto;
}

.box{
    width: $centerWidth;
    height: 45px;
    background-color: $info;
}   

.list li+li{
    // 插值语句 #{}  拼接变量和css
    border-#{$side}: 0;
}

.app{
    width: pxToRem(750px);
}


.navBar{
    // width: pxToRem(750px);
    // sass中的计算 
    // 加法 和 减法  没什么问题
    // 乘法 只是数值计算 单位会保留 
    // 除法 1.只是数值计算 单位会保留 (150px / 5)
    //      2. 两个都有相同单位  去除该单位   (150px / 5px)

    height: 5*9px;  
    background-color: $info;

    // 嵌套语法  => 选择器
    .nav{
        float: left;

        // &  父选择器修饰符   => 表示包裹它的父选择器
        // >  子选择器
        // +  相邻兄弟选择器
        // ~  层级选择器
        // .nav>li
        &>li{
            float: left;
           
            position: relative;
            // border: 1px solid $gray;

            // 嵌套语法  => 属性嵌套 (border background font transition animation )
            // border: {
            //     width: 1px;
            //     style:dashed;
            //     color:$gray;
            // }


            a{
                color: $white;
                line-height: 45px;
                display: block;
                padding: 0 20px;
            }
            
            .subNav{
                line-height: 45px;
                width: 150px;
                position: absolute;
                background-color: $dark;
                left: 0;
                top: 45px;
                text-indent: 20px;
                color: $white;
                height: 0;
                overflow: hidden;
                // display: none;
                // -ms-transition: all 0.5s 0s linear;
                // -moz-transition: all 0.5s 0s linear;
                // -webkit-transition: all 0.5s 0s linear;
                // transition: all 0.5s 0s linear;

                @include compa(transition, all 0.5s 0s linear);
                // @include compa(box-shadow, 1px 1px 1px 2px rgba(0,0,0,0.5));
            }
            &:hover a{
                background-color: $dark;
            }
            // li:hover
            &:hover .subNav {
                // display: block;
                height: 180px;
            }

        }
        &>li+li{
            border-left: 1px solid #333;
        }
    }

    .searchBar{
        float: right;

        .searchCon{
            width: 200px;
            height: 45px;
            float: left;
            box-sizing: border-box;
            border: none;
            outline: none;
            background-color: $gray;
        }
        .searchBtn{
            display: block;
            width: 45px;
            height: 45px;
            background-color: $teal;
            float: right;
        }
    }
}

